<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: html(content=~{::content}, extraScripts=~{::extraScripts})}">

<body>
    <th:block th:fragment="content">

        <div class="container-fluid mt-4">
            <!-- 数据概览 -->
            <div class="row">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">总车辆</h5>
                            <h2 class="card-text" th:text="${overview.totalListings}">0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">平均价格</h5>
                            <h2 class="card-text">¥<span th:text="${#numbers.formatDecimal(overview.avgPrice, 1, 2)}">0.00</span></h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">平均评分</h5>
                            <h2 class="card-text" th:text="${#numbers.formatDecimal(overview.avgRating, 1, 1)}">0.0</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">超级司机</h5>
                            <h2 class="card-text" th:text="${overview.superHostCount}">0</h2>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div id="districtChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div id="priceChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div id="priceDistChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <div id="topListingsChart" class="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </th:block>

    <th:block th:fragment="extraScripts">
        <script>
            // 初始化图表
            const districtChart = echarts.init(document.getElementById('districtChart'));
            const priceChart = echarts.init(document.getElementById('priceChart'));
            const priceDistChart = echarts.init(document.getElementById('priceDistChart'));
            const topListingsChart = echarts.init(document.getElementById('topListingsChart'));

            // 加载区域分布数据
            fetch('/analysis/district')
                .then(response => response.json())
                .then(data => {
                    districtChart.setOption({
                        title: {
                            text: '区域分布'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: data.map(item => item.district)
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '车辆数量',
                            type: 'bar',
                            data: data.map(item => item.count)
                        }]
                    });
                });

            // 加载价格趋势数据
            fetch('/analysis/price-trend')
                .then(response => response.json())
                .then(data => {
                    priceChart.setOption({
                        title: {
                            text: '价格趋势'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: data.map(item => item.month)
                        },
                        yAxis: {
                            type: 'value',
                            name: '价格'
                        },
                        series: [{
                            name: '平均收益',
                            type: 'line',
                            data: data.map(item => item.avgPrice)
                        }]
                    });
                });

            // 加载价格分布数据
            fetch('/analysis/price-distribution')
                .then(response => response.json())
                .then(data => {
                    priceDistChart.setOption({
                        title: {
                            text: '价格分布'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b}: {c} ({d}%)'
                        },
                        series: [{
                            name: '价格区间',
                            type: 'pie',
                            radius: '50%',
                            data: data.map(item => ({
                                name: item.price_range,
                                value: item.count
                            }))
                        }]
                    });
                });


            fetch('/analysis/top-listings')
                .then(response => response.json())
                .then(data => {
                    topListingsChart.setOption({
                        title: {
                            text: '热门车辆TOP10'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name: '评分'
                        },
                        yAxis: {
                            type: 'category',
                            data: data.map(item => item.title)
                        },
                        series: [{
                            name: '评分',
                            type: 'bar',
                            data: data.map(item => item.avg_rating)
                        }]
                    });
                });

            // 监听窗口大小变化，调整图表大小
            window.addEventListener('resize', () => {
                districtChart.resize();
                priceChart.resize();
                priceDistChart.resize();
                topListingsChart.resize();
            });
        </script>
    </th:block>
</body>
</html> 